{% extends 'mathesar/login_base.html' %}
{% load i18n static %}
{% translate "Logging In..." as logging_in_loader_text %}

{% block h1 %}{% translate "Log in to Mathesar" %}{% endblock %}

{% block box_content %}
  <form
    method="post"
    onsubmit="showLoadingStatus({{ logging_in_loader_text }});"
  >
    {% csrf_token %}
    <div class="labeled-input layout-stacked">
      <label for="id_username" class="label-component">
        <span class="label-content">
          <span class="labeled-input-label">{% translate "Username" %}</span>
          <span class="labeled-input-slot input">
            <input type="text" name="username"
            class="input-element{% if form.username.errors %} has-error{% endif %}"
            value="{% if form.username.value %}{{form.username.value}}{% endif %}"
            autofocus autocapitalize="none" autocomplete="username"
            required id="id_username">
          </span>
          {% if form.username.errors %}
            <span class="help error">
              {% for error in form.username.errors %}
                <span>{{error|escape}}</span>
              {% endfor %}
            </span>
          {% endif %}
        </span>
      </label>
    </div>
    <div class="labeled-input layout-stacked">
      <label for="id_password" class="label-component">
        <span class="label-content">
          <span class="labeled-input-label">{% translate "Password" %}</span>
          <span class="labeled-input-slot input">
            <input type="password" name="password"
            class="input-element{% if form.password.errors %} has-error{% endif %}"
            autocomplete="current-password" required id="id_password">
          </span>
          {% if form.password.errors %}
            <span class="help error">
              {% for error in form.password.errors %}
                <span>{{error|escape}}</span>
              {% endfor %}
            </span>
          {% endif %}
        </span>
      </label>
    </div>
    {% if form.non_field_errors %}
      <div class="message-box error-message">
        <div class="icon">&#9888;</div>
        <div>
          {% for error in form.non_field_errors %}
            <span>{{error|escape}}</span>
          {% endfor %}
        </div>
      </div>
    {% endif %}
    <div class="footer">
      <button class="btn btn-primary submit-button" type="submit">
        {% translate "Log In" %}
      </button>


      {% load socialaccount %}
      {% get_providers as socialaccount_providers %}
      {% for provider in socialaccount_providers %}
        <a class="btn btn-secondary" href="{% provider_login_url provider process='login'%}">
        <img src="{% static 'images/sso/' %}{{ provider }}.svg" alt="{{ provider|capfirst }} logo"
          style="height:1em; vertical-align:middle; margin-right:0.5em" onerror="this.onerror=null; this.src='{% static 'images/sso/default.svg' %}';"/>
        Login with {{provider|capfirst}}</a>
      {% endfor %}
      {% if messages %}
        {% for message in messages %}
          {% if 'error' in message.tags %}
            <div class="message-box error-message">
              <div class="icon">&#9888;</div>
              <div>
                  {{ message }}
              </div>
            </div>
          {% endif %}
        {% endfor %}
      {% endif %}

    </div>
  </form>
{% endblock %}
